<template>
    <div class="audio-main">
        <audio ref="audioRef"
               class="bgMusic"
               controls
               :autoplay="true"
               :src="musicUrl"
               @timeupdate="updateSongTime"
        >
        </audio>
        <div class="audio-control" v-if="musicUrl">
            <div class="audio-left">
                <!-- <div class="img"><img src="@/assets/717361.jpg" alt=""></div> -->
                <div class="img"><img :src="songInfo.imgUrl" alt=""></div>
                <div class="play-con">
                    <div class="control-btn">
                        <span @click="musciBack"><Icon type="md-skip-backward" /></span>
                        <span class="mid-play-btn" v-if="audioIsPlay" @click="audioPause"><Icon type="md-pause" /></span>
                        <span class="mid-play-btn" v-else @click="audioPlay"><Icon type="md-play" /></span>
                        <!-- <span class="mid-play-btn" @click="audioPause"><Icon type="md-pause" /></span> -->
                        <span @click="musciNext"><Icon type="md-skip-forward" /></span>
                    </div>
                </div>
            </div>
            <div class="audio-mid">
                <div class="song-singer">{{songInfo.title}}-<span v-for="item in songInfo.singer" :key="item.id">{{item.name }}</span></div>
                <div>
                    <Progress :percent="songPercent" stroke-color="#5D8EBB" :stroke-width="5" class="song-percent">
                        <span style="color:#5D8EBB">{{songNowTime}}/{{songTotalTime}}</span>
                    </Progress>
                </div>
            </div>
            <div class="audio-right"></div>
            <!-- <Button type="primary" @click="audioPause">暂停</Button>
            <Button type="success" @click="audioPlay">播放</Button>
            <span>{{this.currentTime}}</span> -->
        </div>
        <!-- <Button type="sucwarningcess" @click="audioOver">播放结束</Button> -->
    </div>
</template>

<script>
// import musicApi from "@/Apis/musicApis";
import eventBus from '@/utils/bus'
export default {
    props:{
        songmid:{
            type:String
        }
    },
    data() {
        return {
            musicUrl:"",
            palyMusciList:[],
            currentTime: 0,
            audioIsPlay:false,
            songInfo:{
                intro:"",
                imgUrl:"",
                title:"",
                singer:[]
            },
            songTotalTime:'00:00',
            songNowTime:'00:00',
            songPercent:0,
            songIndex:0,
            // palyMusicId:''
        }
    },
    methods: {
        // 当音频播放
        audioPause () {
            console.log('开始播放声音');
            this.$refs["audioRef"].pause();
            // this.indexOfNowSongUrl()
            this.audioIsPlay = !this.audioIsPlay
            // this.getCurrentTime()
        },
        // 当音频暂停
        audioPlay () {
            this.audioIsPlay = !this.audioIsPlay
            this.$refs["audioRef"].play()
            this.audioPercent()
        },
        //播放完毕执行
        audioOver(){
            console.log('播放声音完毕');
            this.audioIsPlay = false
            this.$refs["audioRef"].forEach(item=>{
                item.isStart = true;
            })
        },
        //判断当前是第几首
        // indexOfNowSongUrl(){
        //     let index = this.palyMusciList.indexOf(this.musicUrl);
        //     console.log(index,"index");
        // },
        // 监听音频时间， 实时更新当前播放时间
        updateSongTime (e) {
            this.currentTime = e.target.currentTime
            this.$store.commit('setCurrentTime',this.currentTime)
            //当前播放时长
            let time = Math.floor(this.currentTime)
            let min = Math.floor((time/60) << 0)
            let sec = Math.floor(time % 60)
            if(min < 10) min = '0' + min
            if(sec < 10) sec = '0' + sec
            this.songNowTime = min + ":" + sec
        },
        //实时百分比
        getSongPercent(){
           let num = this.currentTime / this.$refs["audioRef"].duration
           this.songPercent = Math.floor(num.toFixed(2) * 100)
        },
        //计算歌曲总时长
        audioPercent(){
            // console.log(this.$refs["audioRef"].duration);
            let time = Math.floor(this.$refs["audioRef"].duration)
            let min = Math.floor((time/60) << 0)
            let sec = Math.floor(time % 60)
            if(min < 10) min = '0' + min
            if(sec < 10) sec = '0' + sec
            this.songTotalTime = min + ":" + sec
        },
        //上一首
        musciBack(){
            if(this.songIndex < 0) return
            this.songIndex--
            // this.palyMusic(this.songIndex)
        },
        //下一首
        musciNext(){
            if(this.songIndex == this.palyMusciList.length) return
            this.songIndex++
            // this.palyMusic(this.songIndex)
        },
        // 获取播放音乐地址
        // palyMusic(index){
        //     let arr = JSON.parse(localStorage.palyMusciList)
        //     musicApi
        //         .palyMusicApi({
        //             id:arr[index].songmid
        //         }).then(res =>{
        //             for(let obj in res.data.data) this.musicUrl = res[obj]
        //         })
        // },
        
    },
    created() {
        eventBus.$on('musicUrl',(e)=>{
            this.audioIsPlay = true
            for(let obj in e) this.musicUrl = e[obj]
        }),
        //歌曲列表
        // eventBus.$on("sendPlayMusicList",(e)=>{
        //     localStorage.palyMusciList = JSON.stringify(e)
        // }),
        //歌曲信息
        eventBus.$on("songTitleAndSinger",(e)=>{
            this.songInfo = e
        }),
        //当前播放音乐索引
        eventBus.$on("songPlayIndex",(e)=>{
            this.songIndex = e
            console.log(e,'songPlayIndex');
        })
    },
    watch: {
        currentTime(oldTime,newTime){
            // console.log(this.$store.state.currentTime);
            this.audioPercent()
            this.getSongPercent()
            eventBus.$emit("currentTime",newTime)
        }
    }
}
</script>

<style lang="less" scoped>
.bgMusic{
    display: none;
}
.audio-control{
    width: 100%;
    height: 52px;
    display: flex;
    // justify-content: center;
    align-items: center;
    .audio-left{
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 30px;
        .img{ 
            width: 40px;
            height: 40px;
            border-radius: 4px;
            object-fit: cover;
            img{ 
                border-radius: 4px;
                width: 100%;
                height: 100%;
            }
        }
        .play-con{ 
            flex: 1;
            font-size: 26px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            .control-btn{ 
                display: flex;
                span{ 
                    cursor: pointer;
                }
                .mid-play-btn{ 
                    padding: 0 20px;
                }
            }
        }
    }
    .audio-right{ 
        width: 20%;
        height: 100%;
        background: pink;
    }
    .audio-mid{ 
        width: 60%;
        height: 100%;
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        .song-singer{ 
            line-height: 28px;
            color: #5D8EBB;
        }
    }
}
.song-percent{ 
    display: flex;
    justify-content: space-around;
}
</style>